<template>
    <div>
        <div class="binding_Tel"  @click.stop v-show="'操作失败啦'==checkBinded" @click="binding_Tel"><!--v-show="'操作失败啦'==checkBinded"-->
            <div class="yanz"  @click.stop>
                <h1>绑定手机号后开启免费广告制作之旅</h1>
                <div class="tel">
                    <img src="../assets/personal/images/tle.png"><input type="text" placeholder="请输入手机号" style="width:80%;" v-model="tel">
                </div>
                <div class="tel_footer">
                     <div class="tel_yzm">
                        <img src="../assets/personal/images/yzm.png" ><input type="text" placeholder="验证码" style="width:70%;" v-model="yanzengma">                  
                    </div>
                     <button  class="yanzm" id="btn_yanzm" :class="{'yanzm':canClick,'cant-click':cantClick}" @click="countDown">{{content}}</button>
                </div>
                 <div class="tel">
                    <img style="width:13px;height:16px;" src="../assets/1f81c7d067552c7a99c77f51fce5b07.png"><input type="text" placeholder="请输入微信号" style="width:80%;" v-model="weixin">
                </div>
                 <h1>上传微信号，请专家免费指导</h1>
                <button class="btn_yzm_sbmt" @click="submit_n" >确认</button>   
            </div>
        </div>
    </div>
</template>
<style scoped>
/**后添加**/
 /*验证手机号*/
 .btn_yzm_sbmt{
  width: 80%;
  height: 50px;
  background: red;
  color: #ffffff;
  font-weight: bold;
}
#btn_yanzm{
 width: 49%;
 margin-left: 2%;
 float: left;
 margin-top: 17px;
 font-size: 14px;
}
.yanzm{
 border: 1px solid red;    
}
.cant-click{
  border: 1px solid blue;
}
.binding_Tel{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0%;
  z-index: 9999;
}
.yanz{
  width: 80%;
  height: 350px;
  background-color: #f2f2f2;
  position: fixed;
  top:20%;
  left: 10%;
  z-index: 9999;
  border-radius: 5px;
  padding: 30px 0;
}
.yanz h1{
  font-size: 15px;
  padding-bottom: 10px;
  font-weight: bold;
  color: #ed1dfd;
}
.tel,.tel_yzm{
 border-radius: 5px;
 box-sizing: border-box;
 border: 1px solid #dddddd;
 width: 80%;
 margin: 0 auto;
 text-align: left;
 height: 40px;
 margin: 15px auto;
}
.tel_yzm{
  width:49%;
  float: left;     
}
.tel img,.tel_yzm img{
  margin-left: 1px;
  vertical-align: middle;
  margin-left: 15px;
}
.tel input,.tel_yzm input{
  font-size: 14px;
  background-color: #f2f2f2;
  border: none;
  height:30px;
}
.tel_footer{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  clear: both;
}
/*手机号结束*/
</style>
<script>
export default {
    data () {
        return {
                content:'获取验证码',//验证码
                canClick:true,//
                cantClick:false,
                totalTime:'60',
                yanzengma:'',
                tel:'',
                checkBinded:'',//测试绑定手机号判断
                Var_city:this.$route.query.City,
                Var_lat:this.$route.query.lat,
                Var_lon:this.$route.query.lon,
                Var_TelStyle:"失败",
                weixin:''
        }
    },
    mounted(){
        this.chkmobilebind_zs();
    },
    methods: {
        getMessage(){
             this.$emit('getMessage',this.Var_TelStyle)
        },
        binding_Tel:function(){
            this.checkBinded="123"
        },
        childMethod(){
            this.chkmobilebind();
        },
        chkmobilebind_zs(){
            this.$http.get(this.APIURL_PREFIX + "/api/wap/accounts/checkBinded").then((response) => {
                    console.log("查看是否绑定手机");
                    console.log(response.data.msg)
                    if(response.data.msg=="操作成功啦"){
                         this.Var_TelStyle="成功"
                    }
                }).catch(function (err) {
                    console.log(err)
                });
        },
        chkmobilebind(){
            this.$http.get(this.APIURL_PREFIX + "/api/wap/accounts/checkBinded").then((response) => {
                    console.log("查看是否绑定手机");
                    console.log(response.data)
                    this.checkBinded=response.data.msg
                    if(this.checkBinded!="操作失败啦"){
                        this.Var_TelStyle="成功"
                    }else{
                        this.Var_TelStyle="失败"
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            },
             countDown() {     //发送定时器
                if(this.tel){
                    if (!this.canClick) return;
                    this.canClick = false;
                    this.cantClick = true;
                    this.content = "重新发送（" + this.totalTime + "s）";
                    this.apii();
                    let clock = window.setInterval(() => {
                    this.totalTime--;
                    this.content = "重新发送（" + this.totalTime + "s）";
                    if (this.totalTime < 0) {
                    window.clearInterval(clock);
                    this.content = "重新发送";
                    this.totalTime = 60;
                    this.canClick = true;
                    }
                    }, 1000);
                }else{
                      layer.msg("对不起请填写手机号")
                  }
        },
            apii(){//获取验证码
                this.$http.get(this.APIURL_PREFIX+"/api/accounts/checkcode",{ params:{username:this.tel}}).then((response) => {               
                }).catch(function (err) {
                    console.log(err)
                });
            },
            submit_n:function(){//确认验证码
                var re = /^1\d{10}$/;  //手机号正则
                if(this.tel == "" || re.test(this.tel) == false){
                    layer.msg("手机号格式不正确")
                    return;
                }
                if(""==this.yanzengma){
                    layer.msg("验证码不能为空")
                    return;
                }
                 this.$http.post(this.APIURL_PREFIX + '/api/accounts/bindMobile', $.param({username:this.tel,password:this.tel,checkcode:this.yanzengma,wechatId:this.weixin})).then((response) => {
                   if("验证码错误！"==response.data.msg){
                       layer.msg("验证码错误")
                   }else if("该手机号已经注册过龙蛙网！"==response.data.msg){
                        layer.msg(response.data.msg)
                   }
                   else if(0==response.data.code){ 
                       this.Var_TelStyle="成功"
                       this.chkmobilebind();
                       layer.msg("验证成功")
                   }
                }).catch(function (err) {
                    console.log(err)
                });
            },
    },
    watch:{
        Var_TelStyle:function(){
            this.$emit('getMessage',this.Var_TelStyle);//主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
        }
    }
}
</script>
